<template>
		<div class="custom_input_content" :class="{'model' :smsmodul === 'true'}">
			<span v-if="error" class="error">{{errormsg}}</span>
			<label>
				<span class="custom_input_content_title">{{title}}</span>
				<input :type="type" :value="value" :maxlength="maxlength" :placeholder="placeholder" @keyup="inputHandle($event, name, verify)" @blur="inputBlurHandle($event, name, verify)" class="custom_input_content_input" />
				<a @click="smsChainHandle($event)" v-if="smsmodul === 'true'" :disabled="disabled" class="custom_input_content_sms_button" :class="{'on' : disabled}">{{smsMessage}}</a>
			</label>
		</div>
</template>

<script>
	let smsInterval = null;
	export default {
		name: "CustomInput",
		props:["name", "type", "value", "placeholder", "title", "smsmodul", "verify", "maxlength"],
		data:function(){
			return {
				smsMessage: "获取验证码",
				disabled: false,
				error: false,
				errormsg: "",
				inputValue: "" 
			}
		},
		methods:{
			getValue: function(name){
				return this[name];
			},
			inputChainHandle: function(v, name, verify){
				let vf = verify(v);
				this.$set(this, "inputValue", v);
				if (vf.bool){
					this.$set(this, "error", false);
					this.$emit("chainHandle", {name: name, value:v});
				}else{
					this.$set(this, "error", true);
					this.$set(this, "errormsg", vf.msg);
				}
			},
			inputHandle:function(e, name, verify){
				let v = e.target.value.replace(/^\s+|\s+$/gim, "");
				if (e.code === "Enter"){
					this.inputChainHandle(v, name, verify);
				}
			},
			inputBlurHandle: function(e, name, verify){
				let v = e.target.value.replace(/^\s+|\s+$/gim, "");
				this.inputChainHandle(v, name, verify);
			},
			smsChainHandle:function(e){
				let that = this;
				this.$set(this, "disabled", true);
				var maxtime = 60 * 60;  
	            function CountDown() {
					if (maxtime >= 0) {
					 let minutes = Math.floor(maxtime / 60);
					 let seconds = Math.floor(maxtime % 60);
					 let msg = minutes + ":" + seconds;
					 that.$set(that, "smsMessage", msg);
						--maxtime;
					} else {
						 clearInterval(smsInterval);
						 that.$set(that, "disabled", false);
						 that.$set(that, "smsMessage", '获取验证码');
					}
	            }
				smsInterval && clearInterval(smsInterval);
	            smsInterval = setInterval(CountDown, 1);
			}
		}
	}
</script>

<style lang="less">
	@base:23.44/1rem;
	.custom_input_content{
		padding:10/@base 20/@base;
		span{
			&.error{
				color:#fff;
				background-color: #CC2020;
				display:block;
				font-size:20/@base;
				padding:10/@base 20/@base;
				margin:5/@base 0;
			}
		}
		&.model{
			label{
				display: flex;
				span{
					&.custom_input_content_title{
						width:20%;
					}
				}
				input{
					&.custom_input_content_input{
						width:50%;
					}
				}
				a{
					&.custom_input_content_sms_button{
						width:30%;
					}
				}
			}
		}
		label{
			display:flex;
			span{
				&.custom_input_content_title{
					width:20%;
					font-size: 22/@base;
					padding:20/@base 20/@base 20/@base 10/@base;
					text-align: right;
					border-right:1/@base solid #efefef;
					color:#999;
				}
			}
			input{
				&.custom_input_content_input{
					width:80%;
					font-size: 22/@base;
					padding:20/@base 10/@base;
					color:#000;
				}
			}
			a{
				&.custom_input_content_sms_button{
					width:10%;
					font-size: 22/@base;
					padding:20/@base 5/@base;
					color:#000;
					border:1/@base solid #ccc;
					text-align: center;
					border-radius: 5/@base;
					&.on{
						color:#ccc;
					}
				}
			}
		}
	}
</style>
